<template>
  <div class="sites">
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <i class="bread-ico">
          <icon name="wpexplorer"></icon>
        </i>
        <el-breadcrumb-item :to="{ path: '/' }">
          首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/sms' }" v-if="routeName === 'sms'">短信配置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/sites/'+siteId+'/edit' }" v-if="routeName === 'editsms'">来源编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabpane-container" ref="tabpaneContainer" v-loading.body="loading">
      <el-tabs v-model="activeName">
        <el-tab-pane label="短信配置" name="sms">
          <SmsSetting></SmsSetting>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss">
  @import '../scss/index';
    .echarts {
        height: 300px
    }

    .sites {
      .error {
        color: red;
      }
    }
    .btn-group {
      overflow: hidden;

      button {
        float: left;
      }
    }

    .content-main{
      height: 0;
      position: relative;
      float: left;
      min-height: 100%;
      width: 85%;
    }

    .short {
      max-width: 300px;
    }

    .echart-line{
      width: 100%;
      height: 400px;
    }

    .bread-ico {
      float: left;
      margin-right: 8px;
      margin-top: -8px;
      width: 30px;

      .fa-icon {
        width: 100%;
        height: 100%;
      }
    }

    .right-content {
      .el-tabs__header {
        // margin-bottom: 0;
      }
      .el-tab-pane {
        // padding-top: 15px;
      }
      .el-tabs__content {
        // height:  30rem;
        overflow-y: auto!important;
      }
    }

    .badge-list .el-badge {
      margin-right: 40px;
    }

    .scroll {
      width: 99%;
      overflow: hidden;
      overflow-y: auto;
    }

    .import-item {
      border-bottom: 1px solid rgb(223, 230, 236);
    }

    .short.el-select {
      min-width: 300px;
    }

    .el-input.short-filter-input {
      width: 160px;
    }

    .filter-body .filter-item {
      float: left;
      .el-input__inner {
        height: 28px;
      }

      &.mgl {
        margin-left: 10px;
      }

      &.el-pagination {
        padding: 0;
      }
    }
</style>

<script>
import SmsSetting from 'components/SmsSetting'
import Header from 'components/AdminHeader'
import LeftSideBar from 'components/LeftSideBar'
import SelectSite from 'components/SelectSite'
import CustomProfile from 'components/CustomProfile'

import { Col } from 'element-ui'
import { mapState, mapActions } from 'vuex'
import { Popover, Breadcrumb, BreadcrumbItem,
  Tabs, TabPane, Button, Dialog, Upload, Table,
  TableColumn, Pagination, Form, FormItem, Select, Input, Option } from 'element-ui'
import Config from '../config/common'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/wpexplorer'
import MainPage from './MainPage'
// import commonFilter from '../common/sites'

export default {
  data () {
    return {
      siteData: [],
      siteId: null,
      loading: false,
      load: true,
      showUserPanel: false,
      docHeight: window.innerHeight + 'px',
      screenWidth: document.body.clientWidth,
      resize: false,
      activeName: 'sites',
      showDialog: false,
      loadTime: 0,
      uploadAction: '',
      fileList: [],
      filterData: {
        channel_id: null
      },
      queryData: {
        page_index: 1
      },
      isInit: false,
      tabHeight: 500,
      responseList: {},
      currentPage: 1,
      siteDetail: {},
      addStatus: '',
      showFileList: false
    }
  },

  watch: {
    routeName (routeName) {
      console.log(routeName, 'routeName')
      this.activeName = routeName
    },
    addStatus (value) {
      if (value === 'success') {
        this.showDialog = false
        this.loadTime = Math.random()
      }
    },
    screenWidth (val) {
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this

        setTimeout(function () {
          that.resize = !that.resize
          that.timer = false
        }, 400)
      }
    },
    // switchsms (value) {
    //   if (value === false) {
    //     this.loading = true
    //     setTimeout(() => {
    //       this.initialize()
    //     }, 2000)
    //   }
    // },
    showDialog (value) {
      // if (value === false) {
        // this.emptyDatas()
        // this.getsms()
      // }
    },
    uploadDialog (value) {
      console.log(value)
      if (value === false) {
        this.emptyDatas()
        setTimeout(() => {
          this.getsms()
        }, 1000)
      }
      this.tableData = []
      this.fileList = []
      this.responseList = {}
        // this.$refs.upload.clearFiles()
      // }
    },
    dataDictionary (val) {

    }
  },
  methods: {
    changeLoading (loading) {
      this.loading = loading
      console.log('changeLoading')
    },
    initialize () {
      // const windowHeight = window.innerHeight
      // const offsetTop = this.$refs['tabpaneContainer'].offsetTop
      // this.tabHeight = windowHeight - offsetTop - 60
      // this.loading = true
    },
    // ...commonFilter,
    ...mapActions({
      requestsms: 'getsms',
      // getDictionary: 'getDictionary',
      getCustom: 'getCustom',
      saveCustom: 'saveCustom',
      updateMenuIndex: 'updateMenuIndex'
    })
  },
  mounted: function () {
    this.siteId = this.$route.params.id

    this.uploadAction = Config.CRM_API_HOST + '/users/' + this.token + '/import'
    // this.setSizeInputVal(this.queryData.page_size)
    // this.getDictionary()
    this.updateMenuIndex('sms')
    this.activeName = this.routeName
    this.initialize()

    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        this.screenWidth = window.screenWidth
      })()
    }
  },

  components: {
    ELHeader: Header,
    LeftSideBar: LeftSideBar,
    // 'ELsms': sms,
    'SmsSetting': SmsSetting,
    CustomProfile: CustomProfile,
    [Popover.name]: Popover,
    [Breadcrumb.name]: Breadcrumb,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [BreadcrumbItem.name]: BreadcrumbItem,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Upload.name]: Upload,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Pagination.name]: Pagination,
    [Form.name]: Form,
    [Select.name]: Select,
    [Input.name]: Input,
    [Option.name]: Option,
    [FormItem.name]: FormItem,
    SelectSite,
    MainPage,
    // Addsms,
    'el-col': Col,
    'icon': Icon
  },
  computed: {
    ...mapState({
      token: state => state.auth.user.token,
      // dataDictionary: state => state.site.data_dictionary,
      // switchsms: state => state.site.switch_site,
      route: state => state.route,
      path: state => state.route.path,
      routeName: state => state.route.name === 'home' ? 'sms' : state.route.name
    })
  }
}

</script>
